<template>
	<base-page title="佣金提现" navbarBgColor="white" backgroundColor="#F5F5F5">
		<view class="bg-white m-16 p-16 radius-12">
			<view v-if="bankCard">
				<view class="h-20 text-color-regular fs-14 font-normal">
					<text>账户名称:</text>
					<text>{{bankCard.cardName}}</text>
				</view>
				<view class="flex justify-between item-center leading-20 mt-8">
					<view class="inline-flex item-center fs-14 text-color-regular font-normal">
						<text>银行卡号:</text>
						<text>{{bankCard.cardNo}}</text>
					</view>
					<view class="inline-flex item-center" @click="toChangeCard">
						<text class="text-color-hint fs-12 font-normal">去更改</text>
						<image class="w-16 h-17" src="@/static/svg/icon-arrow-right.svg"></image>
					</view>
				</view>
			</view>
			<view v-else class="flex justify-between item-center leading-20">
				<text class="text-color-regular fs-14 font-normal">您还未绑定银行卡</text>
				<view class="inline-flex item-center" @click="toBinding">
					<text class="text-color-hint fs-12 font-normal">去绑卡</text>
					<image class="w-16 h-17" src="@/static/svg/icon-arrow-right.svg"></image>
				</view>
			</view>
			<view class="mt-20 flex item-center">
				<text class="text-color-regular fs-14 font-normal mr-4 flex-shrink">¥</text>
				<input v-model="amount" type="digit" class="fs-24 flex-1 w-0 mr-16 leading-38" placeholder="请输入提现金额" placeholder-class="text-color-hint" />
				<view class="inline-flex center border-primary radius-14 h-26 px-12 fs-12 color-primary font-normal flex-shrink" @click="allInput">全部提现</view>
			</view>
			<view class="flex justify-end item-center fs-12 font-normal mt-8">
				<text class="text-color-regular">可提金额: </text>
				<text class="color-primary">¥{{numberFormat(withdrawStore && withdrawStore.commissionAmt || 0)}}</text>
			</view>
		</view>
		<view class="bg-white m-16 p-16 radius-12">
			<view class="text-color-regular fs-14 font-semibold mb-8">提现说明</view>
			<view class="leading-17 text-color-regular fs-12 font-normal">
				<text>{{withdrawStore && withdrawStore.description && withdrawStore.description.replace(/\\n/g, '\n') }}</text>
			</view>
		</view>
		<template #footer>
			<view class="m-12 bg-primary radius-8 flex center h-46 fs-16 text-white" :style="disableSubmit?'opacity: 0.3;':''" @click="submit">确认提现</view>
		</template>
	</base-page>
</template>

<script setup name="Withdraw">
	/**
	 * 佣金提现界面
	 * 如果是签约成功，则会返回银行卡信息，否则如果用户点击去绑卡，则调用获取入驻状态接口，返回状态和审核拒绝原因
	 * 		如果是待入驻，则跳转到绑定银行卡界面
	 * 		如果是入驻失败，则跳转到绑定银行卡界面，并显示入驻失败原因
	 * 		如果是入驻审核中，在跳转到入驻审核中界面
	 * 		如果是待签约，则跳转到签约提示页面
	 * 		如果是签约失败，则跳转到绑定银行卡界面，并显示签约失败原因
	 * 		如果是签约成功，则不用跳转，刷新佣金提现界面，重新获取银行卡数据
	 */
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { computed, onMounted, ref, getCurrentInstance } from 'vue'
	import { useWithdrawStore } from '@/stores/modules/withdraw.js'
	import { numberFormat } from '@/utils/index.js'

	const withdrawStore = useWithdrawStore()
	const instance = getCurrentInstance()
	const amount = ref('')
	
	// 已绑定银行卡
	const bankCard = computed(() => {
		return withdrawStore.bankList && withdrawStore.bankList.length && withdrawStore.bankList[0] || null
	})
	
	const getEnterState = async () => {
		// 状态(1-待入驻，2-入驻失败，3-待签约，4-签约成功，5-签约失败，6-入驻审核中)
		try{
			uni.showLoading()
			const res = await withdrawStore.getAgentEnterState()
			uni.hideLoading()
			switch (res.state) {
				case 1:
				case 2:
				case 5:
					toBinding()
					break
				case 3:
					uni.navigateTo({
						url: '/pagesG/withdraw/sign',
						events: {
							onSignResult(res) {
								if (res.result) {
									const eventChannel = instance.ctx.getOpenerEventChannel()
									eventChannel.emit('onBindingSuccess', { result: true })
									uni.navigateBack()
								}
							}
						}
					})
					break
				case 4:
					withdrawStore.getAgentEnterApplyListBank()
					break
				case 6:
					uni.navigateTo({
						url: '/pagesG/withdraw/waiting-audit'
					})
					break
				default:
					toBinding()
			}
		}catch(e){
			uni.hideLoading()
		}
	}
	
	const toBinding = () => {
		withdrawStore.getAgentEnterApplyListBank().then(res => {
			if(!res){
				uni.navigateTo({
					url: `/pagesG/withdraw/rebinding`
				})
			}else{
				uni.navigateTo({
					url: '/pagesG/withdraw/binding-bank-card',
					events: {
						onBindingSuccess() {
							console.log('绑定成功')
						}
					}
				})
			}
		})
	}
	
	const toChangeCard = () => {
		// uni.showToast({
		// 	icon: 'none',
		// 	title: '请联系客服修改'
		// })
		uni.navigateTo({
			url: '/pagesG/withdraw/change-bank-card',
			events: {
				onChangeSuccess() {
					console.log('修改成功')
					// withdrawStore.getAgentEnterApplyListBank()
					// withdrawStore.getAgentEnterState()
				}
			}
		})
	}
	
	const disableSubmit = computed(() => {
		return !(amount.value && +amount.value > 0 && withdrawStore.commissionAmt > 0 && bankCard.value)
	})
	
	const allInput = () => {
		amount.value = withdrawStore.commissionAmt
	}
	
	const submit = () => {
		if (disableSubmit.value) return
		withdrawStore.withdrawalApply({
			tradeAmt: amount.value,
			withdrawalType: 3, // 提现类型(1-商户本金提现，2-商户补贴提现，3-佣金提现)
		}).then(res => {
			if (res) {
				uni.navigateBack()
				uni.showToast({
					icon: 'none',
					title: '提现申请成功'
				})
				withdrawStore.getInfo()
			}
		})
	}
	
	onMounted(() => {
		withdrawStore.getAgentEnterState()
	})
</script>
